import React from "react";
import { Avatar, Button, Paper, Chip, Grid, Typography } from "@mui/material";
import { Box, getValue } from "@mui/system";
import { useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";
import { TitleContext } from "../../../router";
import { useLocation } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import Loading from "../../../components/loading";
import MyDialog from "../../../components/MyDialog";
import CourseApplication from "../CourseApplication/CourseApplication";
import Dataform from "../../../components/Dataform";
import GetChipType from "./GetChipType";
import { renderCellExpand } from "../../../components/RenderCellExpand";
import GetDetail from "./GetDetail";

const MyTitle = ({ value }) => {
  return (
    <Typography variant="h6" sx={{ marginTop: 2, marginBottom: 1 }}>
      {value}
    </Typography>
  );
};

export default function Notice() {
  const [proIsFetching, setProIsFetching] = useState(false);
  const [open, setOpen] = useState();
  const [proisSuccess, setProisSuccess] = useState(true);
  const [isFinished, setIsFinished] = useState();
  const state = useLocation().state; //获取传入的值

  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    nowTitle.setnowTitle(0);
  }, []);
  const columns1 = [
    {
      field: "id",
      headerName: "序号",
      flex: 1,
      editable: false,
    },
    {
      field: "atype",
      renderCell: renderCellExpand,
      headerName: "类型",
      flex: 2,
    },
    {
      field: "name",
      renderCell: renderCellExpand,
      headerName: "名称",
      flex: 3,
    },
    {
      field: "detail",
      headerName: "详情",
      hideable: false,
      flex: 3,
      renderCell: GetDetail,
    },
    {
      field: "status",
      // renderCell: renderCellExpand,
      headerName: "状态",
      renderCell: GetChipType,
      // flex: 3,
      width: 150,
    },
  ];
  // courseId: val.courseId,
  //               name: val.name,
  //               credit: val.credit,
  //               capacity: val.capacity,
  //               location: val.location,
  //               status: val.status,

  // id: 2,
  //     course: 2001,
  //     name: "离散数学期末考试",
  //     area: "学线办公室",
  //     date: "2022-12-23",
  //     betime: "14:00",
  //     endtime: "16:00",
  //     status: "申请已通过",
  const [rows1, setRows1] = useState([]);
  const [rows2, setRows2] = useState([]);
  useEffect(() => {
    if (state.info1) {
      setRows1(
        state.info1.map((val, key) =>
          val.date
            ? {
                id: key + 1,
                atype: "考试申请",
                name: val.name,
                detail: {
                  dtype: 2,
                  courseId: val.courseId,
                  area: val.area,
                  date: val.date,
                  betime: val.betime,
                  endtime: val.endtime,
                },
                status: 0,
              }
            : {
                id: key + 1,
                atype: "课程申请",
                name: val.name,
                detail: {
                  dtype: 1,
                  courseId: val.courseId,
                  credit: val.credit,
                  capacity: val.capacity,
                  location: val.location,
                },
                status: 0,
              }
        )
      );
    }
  }, []);
  useEffect(() => {
    if (state.info2) {
      setRows2(
        state.info2.map((val, key) =>
          val.date
            ? {
                id: key + 1,
                atype: "考试申请",
                name: val.name,
                detail: {
                  dtype: 2,
                  courseId: val.courseId,
                  area: val.area,
                  date: val.date,
                  betime: val.betime,
                  endtime: val.endtime,
                },
                status: val.status,
              }
            : {
                id: key + 1,
                atype: "课程申请",
                name: val.name,
                detail: {
                  dtype: 1,
                  courseId: val.courseId,
                  credit: val.credit,
                  capacity: val.capacity,
                  location: val.location,
                },
                status: val.status,
              }
        )
      );
    }
  }, []);
  const rows11 = [
    {
      id: 1,
      atype: "课程申请",
      name: "离散数学1",
      detail: {
        dtype: 1,
        courseId: "c1001",
        credit: 3,
        capacity: 80,
        location: "学线办公室",
      },
      status: "申请中",
    },
    {
      id: 2,
      atype: "考试申请",
      name: "离散数学考试",
      detail: {
        dtype: 2,
        course: "c20111",
        area: "学线办公室",
        date: "2022-12-23",
        betime: "14:00",
        endtime: "16:00",
      },
      status: "申请中",
    },
  ];
  const columns2 = [
    {
      field: "id",
      headerName: "序号",
      flex: 1,
      editable: false,
    },
    {
      field: "atype",
      renderCell: renderCellExpand,
      headerName: "类型",
      flex: 2,
    },
    {
      field: "name",
      renderCell: renderCellExpand,
      headerName: "名称",
      flex: 3,
    },
    {
      field: "detail",
      headerName: "详情",
      hideable: false,
      flex: 3,
      renderCell: GetDetail,
    },
    {
      field: "status",
      // renderCell: renderCellExpand,
      headerName: "状态",
      renderCell: GetChipType,
      // flex: 3,
      width: 150,
    },
  ];
  const rows22 = [
    {
      id: 1,
      atype: "课程申请",
      name: "离散数学1",
      detail: {
        dtype: 1,
        courseId: "c1001",
        credit: 3,
        capacity: 80,
        location: "学线办公室",
      },
      status: "申请已通过",
    },
    {
      id: 2,
      atype: "考试申请",
      name: "离散数学考试",
      detail: {
        dtype: 2,
        course: "c20111",
        area: "学线办公室",
        date: "2022-12-23",
        betime: "14:00",
        endtime: "16:00",
      },
      status: "申请未通过",
    },
  ];
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={6}>
        <Dataform
          fileName={"我的申请-申请中"}
          rows={rows1}
          //loading={getLoading}
          columns={columns1}
        />
      </Grid>
      <Grid item xs={12} md={6}>
        <Dataform
          fileName={"我的申请-已完结"}
          rows={rows2}
          //loading={getLoading}
          columns={columns2}
        />
      </Grid>
    </Grid>
  );
}
